<template>
	<div class="wrapper">
		<div class="dis" v-for="(item,index) in list" :key="index">
			<div class="main">
				<div class="main_a">
					<div class="">
						{{item.activityName}}
					</div>
					<div class="dis">
						<button class="btn" @click="alteration(item.activityId)">变更</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		updateTerActiv,
		selectAgentChannelOtherActivity
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast,
		showConfirmDialog
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRoute()
			const routers = useRouter()
			const state = reactive({
				channelCode: '',
				list: []
			})
			//确定变更按钮
			const alteration = (e) => {
				showConfirmDialog({
						message: `是否确认变更`,
						confirmButtonColor: '#2687FF'
					})
					.then(() => {
						updateTerActiv({
							terList: router.query.terList,
							channelCode: router.query.channelCode,
							activityId: e
						}).then(res => {
							showToast('变更成功')
							setTimeout(() => {
								routers.go(-1);
							}, 2100)
						})
					})
					.catch(() => {
						// on cancel
					})
			}
			//获取活动列表
			const getActivityList = () => {
				selectAgentChannelOtherActivity({
					channelCode: router.query.channelCode
				}).then(res => {
					state.list = res.data
				})
			}
			getActivityList()
			return {
				...toRefs(state),
				alteration,
				getActivityList
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		background-color: #fff;
		height: 100vh;
	}

	.main {
		width: 339px;
		height: 50px;
		background: #FFFFFF;
		box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
		border-radius: 6px;
		margin-top: 12px;
		padding: 0px 15px;
		box-sizing: border-box;

		.btn {
			padding: 6px 12px;
			box-sizing: border-box;
			background-color: #2687FF;
			color: #fff;
			font-size: 12px;
			border-radius: 4px;
		}

		.main_a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100%;

		}
	}
</style>